import React from 'react';
import { NetworkStatus } from '@apollo/client';
import { Box, ListBase } from '@nova-hf/ui';
import { ErrorBanner } from 'beta/components/error/ErrorBanner';
import UI from 'beta/store/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useContractQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import ContractDefaultsContainer from './ContractDefaultsContainer';
import ContractDiscountsContainer from './ContractDiscountsContainer';
import ContractItemsContainer from './ContractItemsContainer';
import ContractPackRequestContainer from './ContractPackRequestContainer';
import ContractPayerChangeRequestsContainer from './ContractPayerChangeRequestsContainer';
import ContractPeriodsContainer from './ContractPeriodsContainer';

type FiberContractContainerProps = {
  ui?: UI;
};

const FiberContractContainer = ({ ui }: FiberContractContainerProps) => {
  const { t } = useTranslation(['services', 'errors', 'fiber']);
  const router = useRouter();
  const contractId = typeof router?.query?.contractId === 'string' ? router?.query?.contractId : '';

  const { data, loading, error, networkStatus, refetch } = useContractQuery({
    variables: {
      input: {
        id: contractId.toString(),
      },
    },
  });

  if (!data || error) {
    return (
      <>
        <ErrorBanner
          eyebrowTexts={[
            t('errors:contractList.netid.eyebrows.1'),
            t('errors:contractList.netid.eyebrows.2'),
            t('errors:contractList.netid.eyebrows.3'),
          ]}
          titles={[
            t('errors:contractList.netid.titles.1'),
            t('errors:contractList.netid.titles.2'),
            t('errors:contractList.netid.titles.3'),
          ]}
          descriptions={[
            t('errors:contractList.netid.descriptions.1'),
            t('errors:contractList.netid.descriptions.2'),
            t('errors:contractList.netid.descriptions.3'),
          ]}
          icon="zap"
          color={ui?.serviceColor ?? 'attention'}
          showLoading={loading || networkStatus === NetworkStatus.refetch}
          refetchButton={{
            text: t('errors:buttons.refresh'),
            icon: 'refresh',
            onClick: () => refetch(),
          }}
          loadingComponent={
            <>
              <ListBase isLoading gap={3} />
              <ListBase isLoading gap={3} />
              <ListBase isLoading />
            </>
          }
        />
      </>
    );
  }

  return (
    <Box display="flex" flexDirection="column" gap={10}>
      <ContractItemsContainer />
      <ContractPeriodsContainer />
      <ContractPayerChangeRequestsContainer />
      <ContractPackRequestContainer />
      <ContractDiscountsContainer />
      <ContractDefaultsContainer />
    </Box>
  );
};

export default inject('ui', 'authentication')(observer(FiberContractContainer));